<template>
	<a-modal :visible="visible" :width="600" title="图片模板" @cancel="handleClose" @ok="handleOk">
		<div class="template_con">
			<div class="template_item" v-for="(item, index) in templateList" :key="index">
				<a-radio-group v-model:value="checkVal">
				    <a-radio :value="item.type">
						<div class="radio_con">
							<div class="left_con">
								<div class="template_name">{{item.name}}<span v-if="item.ratio">({{item.ratio}})</span></div>
								<div class="template_desc">{{item.desc}}</div>
							</div>
							<div class="right_con">
								<img :src="item.url" alt="" />
							</div>
						</div>
					</a-radio>
				</a-radio-group>
			</div>
		</div>
	</a-modal>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		nextTick,
		watch,
		ref,
		computed,
	} from "vue";
	import store from '@/store';
	import {message} from 'ant-design-vue';
	import {PlusOutlined} from '@ant-design/icons-vue';
	import leftImageCon from './leftImageCon.vue';
	import rightTextCon from './rightTextCon.vue';
	import request from "../../../../../../common/utils/request";
	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			params: {
				type: Object,
				default: () => {return {}}
			}
		},
		setup(props, context){
			const state = reactive({
				checkVal: 'single_image',
				templateList: []
			})
			
			const getTemplateList = () => {
				request.get('/work_ai', '/user/shotstack/clip/image_tpl').then(res=> {
					state.templateList = []
					for(let key in res.result){
						state.templateList.push({
							type: key,
							name: res.result[key].name,
							desc: res.result[key].remark,
							ratio: res.result[key].ratio,
							url: res.result[key].icon,
							number: res.result[key].number
						})
					}
				})
			}
			
			const handleClose = () => {
				context.emit('close')
			}
			
			const handleOk = () => {
				let obj = {}
				Object.assign(obj, state.templateList.find(item=>item.type == state.checkVal))
				obj['index'] = props.params.index
				context.emit('close', obj)
			}
			
			watch(()=>props.visible, val=>{
				if(val){
					state.checkVal = props.params?.image_tpl
					getTemplateList()
				}
			})
			
			return{
				...toRefs(state),
				handleClose,
				handleOk
			}
		}
	})
</script>

<style lang="less" scoped>
	.template_con{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		.template_item{
			width: 50%;
			margin-top: 5px;
			.radio_con{
				width: 100%;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				.left_con{
					width: 136px;
					.template_name{
						color: #333639;
					}
					.template_desc{
						color: #9ea4aa;
						font-size: 12px;
					}
				}
				.right_con{
					width: 100px;
					height: 50px;
					flex-shrink: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					img{
						max-width: 100%;
						max-height: 100%;
					}
				}
			}
		}
	}
</style>